<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/animate.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.min.css?v=4.1.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/jQuery-Validation/css/validationEngine.jquery.css" rel="stylesheet">
    <style type="text/css">
        .formErrorContent{
            color: red;
        }
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
        #l-map{height:700px;width:100%;}
        #r-result{width:100%;}
        *{margin:0;padding: 0;}
		.show{width: 625px; height:35px; margin:20px auto; position: relative; }
		.but{width: 110px; height: 39px; background: #0033cc; color:#fff; line-height: 39px; text-align: center; cursor: pointer; float: left; }
		.but:hover{background:#0066ff; }
		.search{width:100%; display: none;position: absolute; top: 37px; }
		.search ul{border:1px solid #ddd;}
		.search ul li{list-style: none; width: 502px; height: 30px; text-indent: 10px; line-height: 30px; }
		.search ul li a.cur{background: #ddd;}
		.search ul li a{color: #000; text-decoration: none; display: block; }
		.search ul li a:hover{background: #ddd; }
		.show span{display: inline-block; width:;}
	  *{
	      margin:0px;
	      padding:0px;
	  }
	  body, button, input, select, textarea {
	      font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
	  }
	  p{
	      width:603px;
	      padding-top:3px;
	      overflow:hidden;
	  }
	  #container{
	    margin-top:50px;
	   	width:100%;
	    min-height:767px;
	    }
    </style>
</head>
<body class="gray-bg" onload="init()">
<div class="wrapper wrapper-content animated fadeInRight">
    <!-- Panel Other -->
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>公司地址搜索</h5>
        </div>
        <div class="ibox-content">
            <div class="row row-lg">
                <div class="col-xs-12">
                    <div class="example-wrap">
                        <!-- start toolbar -->
                        <div class="col-xs-12">
                            <form class="form-horizontal" role="form" id="editStationForm" autocomplete="off">
                            <!-- <input type="hidden" name="stationId" id="stationId"> -->
                                <div class="row">
	                        	<div class="col-xs-8">
		                            <div class="form-group">
		                                <label class="col-xs-4 control-label">详细地址搜索(输入所在地址):</label>
		                                <div class="col-xs-7" style="padding:0; position:relative">
		                                    <input type="text" class="form-control" placeholder="详细地址搜索"  id = "text" autocomplete="off">
											<div class="search">
											  <ul style="position:absolute; width:100%; left:0; top:-3px; z-index:9999; background: #fff;"></ul>
											</div>
		                                </div>
		                            </div>
	                             </div>
	                             <div class="col-xs-4">
                                        <div class="form-group">
                                            <div class="col-xs-8">
                                            <button type="button" class="btn btn-defalt" onclick="closeForm();">关闭</button>
                                            &nbsp;&nbsp;&nbsp;&nbsp;
                                                <button type="submit" class="btn btn-primary" id="save">确定</button>
                                            </div>
                                        </div>
                           		 </div>
                                </div>
	                          </form>
	                        </div>
							
						</div>
					  <div id="container"></div>
					  	<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
						<script type="text/javascript" src="${pageContext.request.contextPath}/js/jsonp.js"></script>
					  	<script src="${pageContext.request.contextPath}/js/jquery-3.1.0.min.js"></script>
						<script type="text/javascript">
							var oText = document.getElementById('text');
							var oLat = document.getElementById('lat');
							var oLng = document.getElementById('lng');
							var oAddress = document.getElementById('address');
							var province = document.getElementById('stationProvince');
							var city = document.getElementById('stationCity');
							var district = document.getElementById('stationArea');
							var oSea = document.getElementsByClassName('search')[0];
							var oUl = document.getElementsByTagName('ul')[0];
							var oLl = document.getElementsByTagName('li');
							var z = -1;
							oText.onkeyup=function(event){
						           var val = this.value;
						           if(event.keyCode==38||event.keyCode==40){return}         
						            $.ajax({
						             type: "get",
						             async: false,
						             url: "http://apis.map.qq.com/ws/place/v1/suggestion",
						             data:{keyword:val,key: '3JMBZ-NWZWX-53J4X-TJOZS-VHEW6-YOFJZ',output: 'jsonp'},
						             dataType: "jsonp",
						             success: function(a){
						                  oUl.innerHTML="";
									    var frag = document.createDocumentFragment();
									    oSea.style.display=a.data!=""?"block":"none";
						                $.each(a.data,function(b,a,c){
						                  var oLi = document.createElement('li');
						                  oLi.innerHTML = '<a href="javascript:;" class="address" data-lng="'+a.location.lng+'" data-address="'+a.address+'" data-lat="'+a.location.lat+'" data-province="'+a.province+'" data-city="'+a.city+'" data-district="'+a.district+'">'+a.address+'</a>';
						                  frag.appendChild(oLi);
						                });
						                oUl.appendChild(frag);
						               document.onkeyup=function(event){
						    	        	if(event.keyCode==38){
						    	        		z--;
						    	        		if(z==-1){
						    	        			z=a.data.length-1;
						    	        		}
						    	        		for(var i=0,len=a.data.length;i<len;i++){
						                            if(oLl[i]!=oLl[z]){
						                            	oLl[i].childNodes[0].classList.remove('cur');
						                            }else{
						                            	oLl[z].childNodes[0].className='cur';
						                            }
						    	        		}
						    	        		oText.value=oLl[z].innerText;
						    	        	}else if(event.keyCode==40){
						    	              z++;
						    	              if(z==a.data.length){
						    	              	z=0;
						    	              }
						    	             for(var i=0,len=a.data.length;i<len;i++){
						                         if(oLl[i]!=oLl[z]){
						                         	oLl[i].childNodes[0].classList.remove('cur');
						                         }else{
						                         	oLl[z].childNodes[0].className='cur';
						                         }
						 	        		}
						    	        	  oText.value=oLl[z].innerText;
						    	        	}    	           
						    	        }
						             },
						         });
								};
								var lng = ""; 
								var lat = "";
								var address = "";
								var province = "";
								var city = "";
								var district = "";
					      $('body').on('click','.address',function(){
					       lng = $(this).data('lng');
					       lat = $(this).data('lat');
					       address = $(this).data('address');
					       province = $(this).data('province');
					       city = $(this).data('city');
					       district = $(this).data('district');
					        getIcon(address)
					      });
					    function getIcon(c){
					                /*  oLat.value = a;
					                 oLng.value = b;
					                 oAddress.value = c;
					                 oText.value=null;
					                 $("#text").attr('placeholder','输入搜索地') */
					                 oText.value=c;
					                 /* province.value=d;
					                 city.value=e;
					                 district.value=f; */
					                 $(".search").hide();
					                  var latLng = new qq.maps.LatLng(a, b);
					                  //调用城市经纬度查询接口实现经纬查询
					                  citylocation.searchCityByLatLng(latLng);
					                }
							
						</script>
					<script>
					var citylocation,map,marker = null;
					var init = function() {
					    var center = new qq.maps.LatLng(39.916527,116.397128);
					    map = new qq.maps.Map(document.getElementById('container'),{
					        center: center,
					        zoom: 13
					    });
					    //调用城市服务信息
					    citylocation = new qq.maps.CityService({
					        complete : function(results){
					            map.setCenter(results.detail.latLng);
					            if (marker != null) {
					                marker.setMap(null);
					            }
					            //设置marker标记
					            marker = new qq.maps.Marker({
					                map: map,
					                position: results.detail.latLng
					            });
					        }
					    });
					     citylocation.searchLocalCity();
					}
					function closeForm() {
					    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
					    parent.layer.close(index);
					}
					</script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/js/plugins/layer/layer.min.js"></script>
<script src="${pageContext.request.contextPath}/js/public/ttbj-core.js"></script>
<script src="${pageContext.request.contextPath}/jQuery-Validation/js/jquery.validationEngine.js"></script>
<script src="${pageContext.request.contextPath}/jQuery-Validation/js/jquery.validationEngine-zh_CN.js"></script>
</body>

</html>